<template>
    <div id="data-view">
        <FactoryIndex :display="factoryDisplay" :data="factory_data" />
        <div class="main-header">
          <div class="header-back-img"></div>
          <div class="mh-left">
            <el-image :src="left_tit_img" class="hd-side-line" />
          </div>
          <div class="mh-middle">
            <dv-decoration-3 style="width:150px;height:30px;" />
            <div class="title-container">{{mainTitle}}</div>
            <dv-decoration-3 style="width:150px;height:30px;" />
          </div>
          <div class="mh-right">
            <el-image :src="right_tit_img" class="hd-side-line" />
          </div>
          <div class="btns-group-panel">
            <div class="hd-btn-cls">
              <el-tooltip class="item" content="界面刷新" placement="top">
                <svg-icon icon-class="example"  class-name="exp-hov"  @click="doRefresh"/>
              </el-tooltip>
            </div>
            <div class="hd-btn-cls">
              <el-tooltip class="item" content="报表系统首页" placement="top">
                <svg-icon icon-class="home"  class-name="home-hov" @click="goHome"/>
              </el-tooltip>
            </div>
            <div class="hd-btn-cls">
              <el-tooltip class="item" content="退出大屏界面" placement="top">
                <svg-icon icon-class="exit"  class-name="exit-hov" @click="logout"/>
              </el-tooltip>
            </div>
            <div style="margin-left: 10px">{{currentDtm}}</div>
          </div>
        </div>

        <div class="main-container">
          <div class="left-chart-container">
            <dv-loading v-if="!chartVisiable">Loading...</dv-loading>
            <Left-Chart-1 :mdata="left_top_data" v-if="chartVisiable" />
            <div style="margin-bottom: 10px"></div>
            <Left-Chart-2 :mdata="left_middle_data" v-if="chartVisiable" />
            <div style="margin-bottom: 10px"></div>
            <Left-Chart-1 :mdata="left_bot_data" v-if="chartVisiable" />
          </div>
          <div class="middle-chart-container">
            <CenterMap :fact_display="factoryDisplay" @map-tap="tapMap"/>
            <el-image fit="cover" class="middle-bot" :src="mid_bot_img" />
          </div>
          <div class="right-main-container">
            <dv-loading v-if="!chartVisiable">Loading...</dv-loading>
            <Left-Chart-1 :mdata="right_top_data" :reverse="true" v-if="chartVisiable" />
            <div style="margin-bottom: 10px"></div>
            <dv-loading v-if="!chartVisiable">Loading...</dv-loading>
            <Right-Chart-2 :mdata="right_mid_data" v-if="chartVisiable" />
            <dv-loading v-if="!chartVisiable">Loading...</dv-loading>
            <Left-Chart-1 :mdata="right_bot_data" :reverse="true" v-if="chartVisiable" />
          </div>
        </div>
    </div>
</template>

<script>
    import LeftChart1 from './LeftChart1'
    import LeftChart2 from './LeftChart2'
    import LeftChart3 from './LeftChart3'
    import CenterMap from "./CenterMap"
    import FactoryIndex from "./FactoryIndex";
    import RightChart1 from './RightChart1'
    import RightChart2 from './RightChart2'
    import RightChart3 from './RightChart3'
    import BottomCharts from './BottomCharts'
    import {parseTime} from "@/utils"
    import analysisApi from "@/api/analysis";


    export default {
      name: 'DataView',
      components: {
        CenterMap,
        FactoryIndex,
        LeftChart1,
        LeftChart2,
        LeftChart3,
        RightChart1,
        RightChart2,
        RightChart3,
        BottomCharts
      },
      data() {
        return {
          mainTitle: '伟明大数据平台',
          dateUpdateInterval: 1000,
          chartUpdateInterval: 1000 * 60 * 5,
          currentDtm: '',
          left_tit_img:require('./img/hd-left-light.gif'),
          right_tit_img:require('./img/hd-right-light.gif'),
          mid_bot_img:'http://wmhb.wm-mis.com/mid-bot-dec3.png',
          chartVisiable: false,
          left_top_data: {},
          left_middle_data: {},
          left_bot_data:{},
          right_top_data: {},
          right_mid_data:{},
          right_bot_data: {},
          factoryDisplay: {
            show: false,
            loading: false
          },
          factory_data: {}
        }
      },
      mounted() {
        let self = this;
        setInterval(function() {
          self.beginTimeCount();
        }, self.dateUpdateInterval);
        self.bigDataReq();
        setInterval(function() {
          self.chartVisiable = false;
          self.bigDataReq();
        }, self.chartUpdateInterval);
      },
      methods: {
        beginTimeCount: function() {
          let curTm = new Date();
          this.currentDtm = parseTime(curTm);
        },
        bigDataReq: function() {
          analysisApi.bigDataScreen().then(res=>{
            const chartData = res.data
            const dateHb = this.convertChartData(chartData.date_hb,'环比')
            const monthHb = this.convertChartData(chartData.month_hb,'环比')
            const jdData = chartData.year_data
            this.right_top_data = dateHb[0]
            this.left_top_data = dateHb[1]
            this.right_bot_data = monthHb[0]
            this.left_bot_data = monthHb[1]
            const sw_jd_list = jdData[1].data
            this.left_middle_data = {
              census:{
                data:[
                  {name:'一季度',value:sw_jd_list[0].value},
                  {name:'二季度',value:sw_jd_list[1].value},
                  {name:'三季度',value:sw_jd_list[2].value},
                  {name:'四季度',value:sw_jd_list[3].value}
                  ],
                  colors:['#00E0DA','#00E0DA','#00E0DA','#00E0DA'],
                  unit:jdData[1].messure,
                  showValue:true
              },
              process:'80%'
            }
            const lj_jd_list = jdData[0].data
            this.right_mid_data = {
              census:{
                data:[
                  {name:'一季度',value:lj_jd_list[0].value},
                  {name:'二季度',value:lj_jd_list[1].value},
                  {name:'三季度',value:lj_jd_list[2].value},
                  {name:'四季度',value:lj_jd_list[3].value}
                  ],
                  colors:['#00E0DA','#00E0DA','#00E0DA','#00E0DA'],
                  unit:jdData[0].messure,
                  showValue:true
              },
              process:'80%'
            }
          })
          setTimeout(()=>{
            this.chartVisiable = true;
          },1000)
        },
        convertChartData(dataArr,type='同比'){
          let chartsOpts = []
          for (let cdata of dataArr){
            let chartOpt = {
              names:[cdata.name,type],
              messures:[cdata.messure,'%'],
              xValues:Object.keys(cdata.data),
              yValues:[Object.values(cdata.data), Object.values(cdata.ratio)]
            }
            chartsOpts.push(chartOpt)
          }
          return chartsOpts
        },
        doRefresh(){
          window.location.reload()
        },
        async logout(){
          await this.$store.dispatch('user/logout')
          this.$router.push('/')
        },
        async goHome(){
          this.$router.push('/')
        },
        tapMap(factoryData) {
          this.factory_data = factoryData;
          this.factoryDisplay.show = true;
        }
      }
    }
</script>

<style lang="scss" scoped>
    @keyframes opa_ani {
     0% {
       opacity: 0.0;
     }
     50% {
       opacity: 1.0;
     }
      100% {
       opacity: 1.0;
     }
    }
    #data-view {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        width: 100%;
        height: 100vh;
        padding: 10px;
        background: #000001 url(~@/views/dashboard/business_report/img/dsj_background.svg) center center no-repeat;
        background-size: 100% 100%;
        color: #fff;
        overflow: hidden;

        .main-header {
            width: 100%;
            height: 80px;
            display: flex;
            flex-direction: row;
            justify-content:space-between;

            .header-back-img{
              position: absolute;
              left: 0;
              top: 20px;
              width: 100%;
              height: 80px;
              background: url(~@/views/dashboard/business_report/img/hd-title-border.svg) center center no-repeat;
              animation-name: opa_ani;
              animation-duration: 10s;
              animation-direction: alternate;
              animation-iteration-count: infinite;
              animation-delay: 3s;
              animation-timing-function: ease-in-out;

            }

            .hd-side-line{
              width: 100%;
              height: 100%;
            }

            .mh-middle {
                width: calc(100% - 440px);
                height: 100%;
                text-align: center;
                padding: 10px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: flex-start;
            }

            .mh-left,
            .mh-right {
              width: 220px;
              height: 80px;
              font-size: 20px;
              color: rgb(1,134,187);

                a:visited {
                    color: rgb(1,134,187);
                }
            }
            .btns-group-panel{
              position: absolute;
              right: 140px;
              height: 30px;
              top:20px;
              font-size: 16px;
              color: white;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;

              .hd-btn-cls{
                cursor: pointer;
                color: #c8c8c8;
                margin-left: 8px;

                &:hover {
                  font-size: 20px;
                  .exp-hov{
                    color: #9da408;
                  }
                  .home-hov{
                    color: #3a8ee6;
                  }
                  .exit-hov{
                    color: red;
                  }

                }
              }
            }
        }
        .title-container {
            margin: 0 20px;
            font-weight: bolder;
            font-size: 30px;
        }
        .main-container {
            width: 100%;
            display: flex;
            flex-direction: row;
            margin: 0;

            .border-box-content {
                padding: 20px;
                box-sizing: border-box;
                display: flex;
            }
        }
        .left-chart-container {
            width: 25%;
            height:calc(100vh - 100px);
            padding: 10px;
            box-sizing: border-box;

            .border-box-content {
                flex-direction: column;
            }
        }
        .middle-chart-container{
          width: 50%;
          height: calc(100vh - 100px);
          padding-left: 5px;
          box-sizing: border-box;
        }
        .right-main-container {
            width: 25%;
            padding: 10px;
            height: calc(100vh - 100px);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

            .border-box-content{
                padding: 5px;
            }
        }
        .rmc-bottom-container {
            height: 35%;
            .rmc_bottom_charts {
                width: 100%;
                height: 100%;
            }
        }
        .middle-bot{
          width: 100%;
          height: 35%;
        }

    }
</style>
